<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="triangle.css" type="text/css">
</head>
<body>

<div class="group group15">
	<p>矩形</p>

	<div class="rectangle"></div>
	<p>含border矩形</p>

	<div class="rectangle hollow"></div>
	<p>纯border矩形</p>

	<p>(width=0,height=0)</p>

	<div class="rectangle border"></div>
	<p>分割border-4份-小三角</p>

	<div class="diff-triangle">
		<span class="triangle-item triangle-left-top"></span>
		<span class="triangle-item triangle-right-bottom"></span>
		<span class="triangle-item triangle-left-bottom"></span>
		<span class="triangle-item triangle-top-right"></span>
	</div>

	<p style="clear: both;">分割border-8份-小三角</p>

	<div class="diff-triangle">
		<span class="triangle-item triangle-1"></span>
		<span class="triangle-item triangle-2"></span>
		<span class="triangle-item triangle-3"></span>
		<span class="triangle-item triangle-4"></span>
	</div>
	<div class="diff-triangle">
		<span class="triangle-item triangle-5"></span>
		<span class="triangle-item triangle-6"></span>
		<span class="triangle-item triangle-7"></span>
		<span class="triangle-item triangle-8"></span>
	</div>
</div>
<div class="group">
	<p>等腰三角形</p>

	<div class="triangle triangle-up"></div>
	<br>

	<div class="triangle triangle-down"></div>
	<br>

	<div class="triangle triangle-left"></div>
	<br>

	<div class="triangle triangle-right"></div>
	<br>

	<div class="triangle-border"></div>
</div>
<div class="group">
	<p>斜三角形</p>

	<div class="oblique-triangle-bottom-left"></div>
	<br><br>

	<div class="oblique-triangle-bottom-right"></div>
	<br><br>

	<div class="oblique-triangle-top-left"></div>
	<br><br>

	<div class="oblique-triangle-top-right"></div>
	<br><br>
</div>
<div class="group group20">
	<p>Tool-Tips</p>

	<div class="event item">
		<div class="event-inner">
			<div class="event-content">TAKE DOWN Rock</div>
			<div class="event-by">BY ALDO</div>
		</div>
		<div class="event-arrow"></div>
		<div class="" style="
    width: 1px;
    height: 13px;
    color: red;
    /*padding: 0;*/
    font-size: 0.1em;
    display: inline-block;
    transform: scale(0.7);
    padding: 8px 36px;
">◆</div>
		<div class="event-time">4:29</div>
	</div>
	<p>Tool-Tips-BorderDouble</p>

	<div class="event item">
		<div class="event-inner border-width">
			<div class="event-content">TAKE DOWN</div>
			<div class="event-by">BY ALDO</div>
		</div>
		<div class="event-arrow-double"></div>
		<div class="event-point"></div>
		<div class="event-time">4:49</div>
	</div>
</div>
<div class="group group20">
	<p>旋转矩形</p>

	<div class="rotateRect"></div>
	<div class="rotateRect zigzag-clear"></div>
</div>
<div class="group group20">
	<p>书签</p>

	<div class="bookmark"></div>
	<br>

	<div class="ribbon">
		<div>4</div>
	</div>
	<div>
		<p class="year-end-ribbon">
			Single
		</p>
	</div>


	<div class="ribbon-demo">
		<div class="ribbon-body">words go here</div>
		<div class="ribbon-right"></div>
		<div class="ribbon-left"></div>
	</div>
	<div class="ribbon-demo">
		<div class="ribbon-body">And the ribbon goes on badda dip badum bum</div>
		<div class="ribbon-right"></div>
		<div class="ribbon-left"></div>
	</div>
	<div class="ribbon-demo">
		<div class="ribbon-body"></div>
		<div class="ribbon-right"></div>
		<div class="ribbon-left"></div>
	</div>
	<br><br>

	<div class="container2 zigzag-new"></div>
</div>

</body>
</html>